<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
	 
<style type="text/css">
 

.myShelvesBox {
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

.myShelvesTheContainer {
	float: left;
	width: 286px;
	margin: 10px 44px; overflow : hidden;
	border: 1px solid #00000099;
	overflow: hidden;
}

.top_text {
	margin-top: 10px;
}

.top_img_box {
	width: 70%;
	height: 233px;
	padding: 2.5%;
	margin: auto;
}

.top_img {
	width: 95%;
	height: 100%;
}

.myShelves_top {
	float: left;
}

.myShelves_bottom {
	width: 100%;
	height: 100px;
	margin: 0px;
	float: left;
}

.mp {
	margin: 1px 21px;
}

.text {
	font-size: 13px;
	text-decoration: none;
}

.redText {
	color: red;
}

.price {
	text-decoration: line-through;
}

.myShelvesBtn {
	margin-left: 21px;
}

.btnText {
	color: #cc9732;
}

.borderBtn {
	color: #c78c1ce6;
	border: 1px solid #c78c1ce6;
	padding: 2px 6px;
}

.bottom_a {
	margin-top: 10px;
}

.bottom_b {
	margin-top: 18px;
}

.deleteBtn {
	color: #8e8e88c9;
}
 
</style>
</head>
<body>
	<div class="myShelvesBox">
		<!-- 
		 <div class="myShelvesTheContainer">
			<div class="myShelves_top">
				<div class="top_img_box">
					<img class="top_img"
						src="http://img3.imgtn.bdimg.com/it/u=1844510188,2731586085&fm=27&gp=0.jpg">
				</div>
				<div class="top_text">
					<p class="text mp">中高筒女靴时尚可爱多色可选</p>
					<p class="text mp">内增高防滑底</p>
					<p class="text mp">
						市场价：<span class="price">&nbsp;￥135&nbsp;</span>
					</p>
					<p class="text mp">
						厂家直销价：<span class="price">&nbsp;￥85&nbsp;</span>
					</p>
					<p class="redText mp">厂家批发价：￥62</p>
				</div>
			</div>
			<div class="myShelves_bottom">
				<div class="bottom_a">
					<a class="myShelvesBtn text btnText" href="#">发布到微信</a><a
						class="myShelvesBtn text btnText" href="#">发布到微店</a><a
						class="myShelvesBtn text btnText" href="#">下载图片包</a><br> <a
						class="myShelvesBtn text btnText" href="#">复制产品链接</a><a
						class="myShelvesBtn text btnText borderBtn" href="#">下单购买</a>
				</div>
				<div class="bottom_b">
					<a class="myShelvesBtn text deleteBtn">删除</a>
				</div>
			</div>
		</div>
		  -->
	</div>
	<script type="text/javascript">
	$(function(){
		//在后台取到货架信息
		var url = "shelves/findByMbId.action";
		$.post(url,null,function(datas){
			//console.info("我的货架!");
			//console.info(datas);
			liImgLoader(datas);
		},"json");
	});
	
	
	/**
	 * 产品展示列表的li元素生成器
	 * @see li元素内含img
	 * @param arr 产品展示的集合
	 * @returns
	 * @author 罗海兵
	 * @dateTime 2017年11月9日下午4:54:34
	 * @version 1.0
	 */
	function liImgLoader(arr){
		 $(".myShelvesBox").html("");//删除ul下面的所有li
		if(typeof arr === 'undefined'){
			console.info("arr的结果是："+arr);
			//alert("集合是空的， ==== "+arr);
		}
		for(var i=0;i<arr.length;i++){//循环产品展示的集合
			var obj=arr[i];//从集合中取出元素
			//console.error(obj); 
			$(".myShelvesBox").append('<div class="myShelvesTheContainer" id="she_'+obj.sheId+'"><a href="pages/front/info.jsp?proId='+obj.proId+'&stId='+obj.stId+'&sheId='+obj.sheId+'" target="_blank"><div class="myShelves_top"><div class="top_img_box"><img class="top_img" src="'+obj.imgPath+'"></div><div class="top_text"><p class="text mp">'+obj.proName+'</p><p class="text mp"> 市场价：<span class="price">'+obj.proPrice/100+'</span></p><p class="text mp"> 厂家直销价：<span class="price">'+obj.proPrice0/100+'</span></p><p class="redText mp">厂家批发价：'+obj.proPrice1/100+'</p></div></div></a><div class="myShelves_bottom"><div class="bottom_a"><a class="myShelvesBtn text btnText copyLink" data-clipboard-text="http://www.ehuoyuan.cn/shop/pages/front/info.jsp?proId='+obj.proId+'&stId='+obj.stId+'" href="javascript:void(0)">复制产品链接</a><a class="myShelvesBtn text btnText borderBtn" href="pages/front/info.jsp?proId='+obj.proId+'&stId='+obj.stId+'&sheId='+obj.sheId+'" target="_blank">下单购买</a></div><div class="bottom_b"><p style="margin-left:20px;color:#ff00ff">图片数据包(请联系客服)</p><a class="myShelvesBtn text deleteBtn" href="javascript:deleteSheId(\''+obj.sheId+'\')">删除</a></div></div></div>');
		}
		
		var clipboard = new ClipboardJS('.copyLink');
		clipboard.on('success', function(e) {
		   swal("复制成功!");
		});
		clipboard.on('error', function(e) {
			swal("复制失败!");
		});
	}
	
	/**
	删除货架
	*/
	function deleteSheId(id){
		
		swal({
			  title: '确定删除吗？', 
			  text: '', 
			  icon: "warning",
			  buttons: ["取消", "确认删除"],
			  dangerMode: true,
			})
			.then((willDelete) => {
			  if (willDelete) {
				  var url = "shelves/delete.action";
					var data = {"sheId":id};
					$.ajax({
						url:url,
						data:data, 
						type:"get",
						success:function(mes){
							if(mes==1){
								$("#she_"+id).remove();
								 swal("已删除！", "该商品在我的货架已经被删除。", 'success') ;
							}else{
								swal("删除失败!");
							}
						},
						error:function(mes){
							swal("后台发送错误!");
						}
					});	
			  } else {
			    swal("放心,货架商品还存在!");
			  }
			});
		
		/* 
		swal({ 
			  title: '确定删除吗？', 
			  text: '你将无法恢复该商品货架！', 
			  type: 'warning',
			  showCancelButton: true, 
			  confirmButtonColor: '#3085d6',
			  cancelButtonColor: '#d33',
			  confirmButtonText: '确定删除！', 
			  cancelButtonText: '取消删除！'
			}).then(function(is){
				 
				if(is.value){
					var url = "shelves/delete.action";
					var data = {"sheId":id};
					$.ajax({
						url:url,
						data:data, 
						type:"get",
						success:function(mes){
							if(mes==1){
								$("#she_"+id).remove();
								 swal("已删除！", "该商品的货架已经被删除。", 'success') ;
							}else{
								swal("删除失败!");
							}
						},
						error:function(mes){
							swal("后台发送错误!");
						}
					});
					
	        		 
	        		  
	        	  }else if(is.dismiss=="cancel") {
	        		  swal("取消删除！", "商品还在,放心。", 'success') 
	        	  }
				  
			}).catch(swal.noop) */

			
		
	}
	
	</script>
</body>
</html>